<template>
  <div>
    <div :class="['top-cont', { active: bgShow }]">
      <van-nav-bar left-arrow>
        <template #left>
          <van-tag round color="#d8d8d8">
            <van-icon name="location" :color="topColor" />
            <span class="color-333">总部旗舰店</span>
          </van-tag>
        </template>
        <template #title>
          <span class="title">我在家</span>
        </template>
        <template #right>
          <van-icon name="search" size="18" :color="topColor" />
          <van-icon name="chat-o" size="18" :color="topColor" />
        </template>
      </van-nav-bar>
      <van-tabs
        line-height="0"
        :background="bgShow ? 'none' : 'white'"
        :title-active-color="topColor"
        :title-inactive-color="topColor"
      >
        <van-tab v-for="index in 8" :title="'标签 ' + index" :key="index">
        </van-tab>
      </van-tabs>
    </div>
    <div class="wrapper" ref="wrap">
      <div class="content">
        <van-swipe class="banner" indicator-color="#333">
          <van-swipe-item v-for="(item, index) in 4" :key="index">
            <img src="https://img.wzj.com/modules/PIC5171021070032.jpg" alt="" />
          </van-swipe-item>
        </van-swipe>
        <div class="prod-list">
          <GoodItem 
            v-for="(item, index) in data.list" 
            :key="index"
            :gdata="item"
          />
        </div>
      </div>
    </div>
    <div class="back-top" @click="handleBack">
      <van-icon name="back-top" size="20"/>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "@vue/reactivity";
import { computed, nextTick, onBeforeMount, onMounted } from "@vue/runtime-core";
import {productGet} from '../api/goods'
import BScroll from '@better-scroll/core'
import GoodItem from '../components/GoodItem.vue'

let data = reactive({
  list: [],
});
let wrap = ref()//实现页面滚动监听
//控制顶部导航背景
let bgShow = ref(true);
let topColor = computed(()=>{
  return bgShow.value ? '#fff' : '#333'
})
let bs
onMounted(() => {
  productGet().then((res) => {
    console.log(res);
    data.list = res.data.data;
    nextTick(()=>{
      bs = new BScroll(wrap.value,{
        probeType:3,  //开启scroll事件监听
        bounce: {  //阻止回弹
          top: false
        },
        click:true
      })
      bs.on('scroll', (position) => {
        // console.log(position.x, position.y)
        let y = Math.abs(position.y)
        bgShow.value = y<300
      })
    })
  });
})

let handleBack = ()=>{
  bs.scrollTo(0,0,500)
}


</script>

<style lang="less" scoped>
.top-cont {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  &.active {
    .van-nav-bar {
      background: none;
    }
    .title {
      color: #fff;
    }
  }
}
.banner {
  color: #fff;
  // font-size: 20px;
  // line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
  img {
    width: 100%;
  }
}
.wrapper{
  height: 100vh;
  // border: 1px solid red;
  overflow: hidden;
}

.back-top{
  height: 60px;
  width: 60px;
  background: #fff;
  box-shadow: 0 0 20px 4px rgba(0,0,0,0.3);
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  position: fixed;
  bottom: 70px;
  right: 20px;
}
</style>
